<template>
  <div class="view-image">
    <fx-card title="基础用法">
      <fx-row>
        <fx-col class="center">
          <span>fill</span>
          <fx-image :src="picList[0]" fit="fill" width="100px" height="100px"/>
        </fx-col>
        <fx-col class="center">
          <span>contain</span>
          <fx-image :src="picList[0]" fit="contain" width="100px" height="100px"/>
        </fx-col>
        <fx-col class="center">
          <span>cover</span>
          <fx-image :src="picList[0]" fit="cover" width="100px" height="100px"/>
        </fx-col>
        <fx-col class="center">
          <span>none</span>
          <fx-image :src="picList[0]" fit="none" width="100px" height="100px"/>
        </fx-col>
        <fx-col class="center">
          <span>scale-down</span>
          <fx-image :src="picList[0]" fit="scale-down" width="100px" height="100px"/>
        </fx-col>
      </fx-row>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="点击预览">
      <fx-image :src="picList[0]" width="200px" height="200px" :preview-list="picList"/>
      <template #hide>
        <pre v-highlight="previewList"><code></code></pre>
      </template>
    </fx-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'

export default defineComponent({
  name: 'viewImage',
  setup () {
    const picList = reactive([
      new URL('../../assets/1.jpg', import.meta.url).href,
      new URL('../../assets/2.jpg', import.meta.url).href,
      new URL('../../assets/3.jpg', import.meta.url).href,
      new URL('../../assets/4.jpg', import.meta.url).href,
      new URL('../../assets/5.jpg', import.meta.url).href,
      new URL('../../assets/6.jpg', import.meta.url).href,
      new URL('../../assets/7.jpg', import.meta.url).href,
      new URL('../../assets/8.jpg', import.meta.url).href,
      new URL('../../assets/9.jpg', import.meta.url).href,
      new URL('../../assets/10.jpg', import.meta.url).href
    ])

    const base = `<fx-row>
  <fx-col>
    <span>fill</span>
    <fx-image :src="picList[0]" fit="fill" width="100px" height="100px"/>
  </fx-col>
  <fx-col>
    <span>contain</span>
    <fx-image :src="picList[0]" fit="contain" width="100px" height="100px"/>
  </fx-col>
  <fx-col>
    <span>cover</span>
    <fx-image :src="picList[0]" fit="cover" width="100px" height="100px"/>
  </fx-col>
  <fx-col>
    <span>none</span>
    <fx-image :src="picList[0]" fit="none" width="100px" height="100px"/>
  </fx-col>
  <fx-col>
    <span>scale-down</span>
    <fx-image :src="picList[0]" fit="scale-down" width="100px" height="100px"/>
  </fx-col>
</fx-row>`

    const previewList = `<fx-image :src="picList[0]" width="100px" height="100px" :preview-list="picList"/>

export default defineComponent({
    setup() {
      const picList = reactive([
        new URL('../../assets/1.jpg', import.meta.url).href,
        new URL('../../assets/2.jpg', import.meta.url).href,
        new URL('../../assets/3.jpg', import.meta.url).href,
        new URL('../../assets/4.jpg', import.meta.url).href,
        new URL('../../assets/5.jpg', import.meta.url).href,
        new URL('../../assets/6.jpg', import.meta.url).href,
        new URL('../../assets/7.jpg', import.meta.url).href,
        new URL('../../assets/8.jpg', import.meta.url).href,
        new URL('../../assets/9.jpg', import.meta.url).href,
        new URL('../../assets/10.jpg', import.meta.url).href
      ])
    }
})`

    return {
      picList,
      base,
      previewList
    }
  }
})
</script>

<style scoped lang="scss">
.view-image {
  .center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    span {
      font-size: 16px;
    }
  }
}
</style>
